<template>
    <div class="dindanlist">
        <div class="list-nav">
            <span class="el-icon-s-operation">数据列表</span>
            <el-button class="list-btn2" @click="dialogFormVisible = true">添加

            </el-button>
        </div>
        <div class="list-top">
            <div class="list-content">
                <el-table ref="multipleTable" :data="meteringList" border tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column prop="name" label="单位名称" width="300">
                    </el-table-column>
                    <el-table-column prop="addTime" label="添加时间" width="250">
                    </el-table-column>
                    <el-table-column prop="isUsed" label="是否启用" width="200">
                        <template slot-scope="scope">
                            <el-switch @change="Switch(scope.row)" v-model="scope.row.isUsed" active-color="#13ce66">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" class="brand-edit" @click="dialogFormVisible = true">编辑</el-button>
                            <el-button type="text" class="brand-del" @click="Delmetering(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="list-foot">
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currpage" :page-size="pageSize" layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="添加计量单位" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form">
                <el-form-item label="计量单位名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Addmetering(form)">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { MeteringApi, PagingApi, EnableApi, DelMeteringApi, AddmeteringApi } from "@/http/xiaoShou/metering.js";
export default {
    data() {
        return {
            formInline: {},
            pageSize: 10,
            currpage: 1,
            total: 0,
            meteringList: [],
            multipleSelection: [],
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                addTime:new Date().toLocaleString(),
            },
            formLabelWidth: '120px',
        }
    },
    created() {
        this.getInit(this.currpage);
    },
    methods: {
        //渲染页面
        async getInit(offset) {
            MeteringApi()
                .then(res => {
                    this.total = res.data.data.length
                })
                .catch(err => {
                    console.log('获取列表失败：', err);
                });
            let data = await PagingApi(offset)
            this.meteringList = data.data.data
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //是否启用
        Switch(row) {
            EnableApi(row.id, row.isUsed)
                .then(res => {
                    console.log(res)
                    console.log(row)
                })
                .catch(err => {
                    console.log('获取列表失败', err);
                })
        },
        //删除
        Delmetering(id) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            })
            .then((res)=>{
                console.log(res)
                 DelMeteringApi(id)
                .then((res) => {
                    console.log(res, id);
                    //删除提示
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getInit(this.currpage);
                })
            })

                .catch((err) => {
                    console.log(err);
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    })
                })
        },
        //添加、编辑
        Addmetering(form) {
            this.$confirm("此操作将添加计量单位, 是否继续?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            })
            .then((res)=>{
            console.log(res)
            this.dialogFormVisible = false
            AddmeteringApi(form)
                .then((res) => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                    this.getInit(this.currpage);
                })
            })
                .catch((err) => {
                    console.log(err);
                     this.$message({
                        type: 'info',
                        message: '取消添加'
                    })
                })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getInit(val)
        },


    }
}
</script>
<style lang="scss" scoped>
.dindanlist {
    background-color: rgba(243, 243, 243);
    border: 1px solid rgb(228, 228, 228);
    line-height: 50px;
    margin-top: 20px;

    .list-nav {
        padding: 0 20px;

        span {
            color: #666;
        }

        .list-btn1,
        .list-btn2 {
            float: right;
            margin-top: 5px;
        }
    }
}

.brand-look,
.brand-edit,
.brand-del {
    color: #1ABC9C;
}

.list-foot {
    border: 1px solid rgb(228, 228, 228);
    height: 48px;
    background-color: rgba(243, 243, 243);
    line-height: 48px;

    .block {
        float: right;
    }
}
</style>